<template>
  <div>
    <h1>我是App根组件</h1>
    <ul>
      <li v-for="(item,index) in info.hobby" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
//目前App根组件需要发请求获取服务器数据进行展示，已经安装上axios
//在开发项目的时候,经常组件里面发请求获取服务器数据-----经常在组件的mounted钩子发请求
import axios from 'axios';
export default {
  name: '',
  data() {
    return {
      info:{}
    }
  },
  //组件挂载完毕的钩子:为什么经常在这里发请求,当这个钩子执行的时候,页面中的结构都已经有了！！！
  //如果在这里发请求,请求会发几次?一次   接口是一个GET请求
  mounted() {
     //axios使用形式有几种?对象、函数
     //函数写法,then第一个回调，即为成功的回调，注入即为服务器返回数据
     //axios发请求是向代理服务器发请求，由于代理服务器协议、域名、端口与本项目一致[相当于在同一台服务器上]
     //可以省略协议、域名、端口号【简写方法】
     axios({url:'http://127.0.0.1:8080/api/students',method:'get'}).then((res)=>{
        console.log(res);
     });
  },
}
</script>

<style scoped>

</style>
